<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.customer" placeholder="客户姓名" style="width: 160px;margin-top:6px" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.merchant" placeholder="选择商户" filterable class="filter-item" style="width:160px;margin-top:6px">
        <el-option label="选择商户" value="" />
        <el-option
          v-for="item in merchant_list"
          :key="item.merchant_id"
          :label="item.merchant_name"
          :value="item.merchant_id"
        />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-top:9px" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-plus" style="margin-top:9px" @click="handleCreate">
        新增
      </el-button>
      <excelout></excelout>
     
    </div>
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      
      <el-table-column label="商户名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.merchant_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.real_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户电话" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证" align="center">
        <template slot-scope="{row}">
          <span>{{ row.idcard }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.total_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="首打金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.first_pay }}</span>
        </template>
      </el-table-column>

      <el-table-column label="首打比例" align="center">
        <template slot-scope="{row}">
          <span>{{ row.factoring_rate }}</span>
        </template>
      </el-table-column>

   

      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button size="mini" type="warning" @click="settleDetail(row.order_id)">
            结算详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog title="新增" :visible.sync="addAble" style="width: 1000px;margin: auto;">
      <el-form ref="dataForm" :model="form" label-width="120px">
        <el-form-item label="选择订单">
          <el-select v-model="form.order_id" placeholder="选择订单" filterable>
            <el-option
              v-for="item in order_list"
              :key="item.order_id"
              :label="item.real_name"
              :value="item.order_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="首打比例">
          <el-input v-model="form.factoring_rate" type="number" placeholder="0-1之间" style="width:200px"/>
        </el-form-item>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="returnOrderSubmit()">确 定</el-button>
      </span>

    </el-dialog>
    <el-dialog title="结算" :visible.sync="settleAble" style="width: 2000px;margin: auto;">
        <el-row style="margin-top:20px;font-size:14px;color:#666">
          <el-col :span="4">客户：{{ order.real_name }}</el-col>
          <!-- <el-col :span="8">医院：{{ order.merchant_name }}</el-col> -->
          <el-col :span="4">本金：{{ order.total_money }}</el-col>
          <el-col :span="4" >首打款：{{ order.first_pay }}</el-col>
          <el-col :span="4" >回款周期：{{ order.hkzq }}</el-col>
          <el-col :span="4" >已结算：{{ order.settle_money }}</el-col>

        </el-row>

        <el-table :key="tableKey" v-loading="listLoading" :data="settle_list" :row-class-name="tableRowClassName" border fit highlight-current-row style="width: 100%;margin-top:20px">

          <el-table-column label="期数" align="center" width="80px">
            <template slot-scope="{row}">
              <span>{{ row.num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="本金" align="center" width="120px">
            <template slot-scope="{row}">
              <span>{{ row.benjin }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否结算" align="center" width="120px">
            <template slot-scope="{row}">
              <el-select v-model="row.is_settle" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="结算金额" align="center" width="150px">
            <template slot-scope="{row}">
              <div class="input-box">
                <el-input v-model="row.settle_money" size="small" prop="settle_money"  />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="结算时间" align="center" width="180px" >
            <template slot-scope="{row}">
              <div v-if="row.settle_day==null" class="block">
                <el-date-picker
                  v-model="row.settle_day"
                  style="width:140px"
                  format="yyyy-MM-dd"
                  type="datetime"
                  placeholder="选择日期"
                />
              </div>
              <div v-if="row.settle_day!=null" class="block">
                <el-date-picker
                  v-model="row.settle_day"
                  style="width:140px"
                  format="yyyy-MM-dd"
                  type="datetime"
                  placeholder="选择日期"
                />
              </div>
              <!-- <span v-if="row.settle_day!=''">{{ row.settle_day }}</span> -->
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
            <template slot-scope="{row,$index}">
              <el-button  type="primary" size="mini" @click="onSubmitSettle(row)">
                保存
              </el-button>
              <!-- <el-button v-if="row.can_bond==1&&row.is_paid==1" type="error" size="mini" @click="toBond(row)">
                转为保证金
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
    </el-dialog>
  </div>

</template>

<script>
import {
  tongRongMlist, reversalOrder,reversalOrderList,getSettleList,onSubmitSettle,reversalExcelout
} from '@/api/finance'
import waves from '@/directive/waves' // waves directive
import { merchantListOnlyMerchant } from '@/api/merchant'
import excelout from '@/components/excelout/index.vue'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'ReceiveTable',
  components: {
    Pagination,excelout
  },
  directives: {
    waves
  },
  data() {
    return {
      form:{},
      settle_dadte:'',
      order:{},
      merchant_list:[],
      order_list:[],
      settle_list:[],
      tableKey: 0,
      list: null,
      addAble: false,
      settleAble:false,
      total: 0,
      listLoading: true,
      infolist: [],
      listQuery: {
        page: 1,
        limit: 10,
        investor_id:2,
      },
      options: [{
          value: 1,
          label: '是'
        }, {
          value: 0,
          label: '否'
        }],
    }
  },
  created() {
   
    this.cacheQueryFormat();
    this.getList();
    this.getMerchantList();
    // 添加钩子，页面刷新
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  mdestroyed() {
    // 添加钩子，页面刷新
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    beforeunloadFn(e) {
      // 刷新页面事件
      sessionStorage.removeItem('haierreversal')
    },
    cacheQueryFormat() {
      const cacheQuery = sessionStorage.getItem('haierreversal')
      if (cacheQuery) {
        this.listQuery = JSON.parse(cacheQuery)
      }
    },
    settleDetail(order_id){
      this.settleAble = true;
      this.getSettleList(order_id)
    },
    getSettleList(order_id){
      getSettleList({order_id:order_id}).then(response => {
        this.settle_list = response.data.list;
        this.order = response.data.order;
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleCreate(){
      this.addAble = true;
      this.tongRongMlist();
    },
    tongRongMlist() {
      tongRongMlist(this.listQuery).then(response => {
        this.order_list = response.data
      })
    },
    getMerchantList() {
      merchantListOnlyMerchant(this.listMerchantQuery).then(response => {
        this.merchant_list = response.data.merchant.data
      })
    },
    onSubmitSettle(row){
      if(row.settle_day==null){
        this.$notify({
            title: '提示',
            message: '请选择结算日期',
            type: 'error',
            duration: 2000
          });
          return;
      }
      onSubmitSettle(row).then(response => {
        if(response.code==200){
          this.$notify({
            title: '提示',
            message: '成功',
            type: 'success',
            duration: 2000,
            onClose: this.getSettleList(row.order_id)
          })
        }
      })
    },
    returnOrderSubmit(){
      reversalOrder(this.form).then(response => {
        if(response.code==200){
          this.addAble = false;
          this.$notify({
            title: '提示',
            message: '成功',
            type: 'success',
            duration: 2000,
            onClose: this.getList()
          })
        }
      })
    },
    getList() {
      sessionStorage.setItem('haierreversal', JSON.stringify(this.listQuery))
      reversalOrderList(this.listQuery).then(res => {
        this.list = res.data.data
        this.total = res.data.total
      })
      this.listLoading = false
    },
    tableRowClassName({row, rowIndex}) {
      let str = '';
      switch(row.is_settle){
        case 1:
          str = 'success-row';
          break
      }

      return str;
    },
    excelout() {
        this.listLoading = true
        this.listQuery.limit = this.total;
        reversalExcelout(this.listQuery).then(response => {
          this.listLoading = false
          const filepath = response.data.path
          window.location.href = filepath
        })
      },
  }
}
</script>

<style>
  .el-table .success-row {
    background: #98dd72;
  }
</style>
